/**
 * 目标1：获取文章列表并展示
 *  1.1 准备查询参数对象
 *  1.2 获取文章列表数据
 *  1.3 展示到指定的标签结构中
 */
//1.1 准备查询参数对象
//不是获取文章列表的所有的内容，所以准备一个查询参数的对象
const queryObj = {
    status: '', //文章状态 1-待审核，2-审核通过，不传为全部状态
    channel_id: '', //频道id
    page: 1, //当前页码
    per_page: 2  //当前页面的条数
}
let totalCount = 0 //保存文章总条数

//后续不管是筛选还是换页还是直接展示都要用到渲染文章列表，所以封装成函数
async function setArtileList() {
    //1.2 获取文章列表数据
    const res = await axios({
        url: '/v1_0/mp/articles',
        method: 'GET',
        params: queryObj
    })
    console.log(res);
    console.log(res.data.results);
    //1.3 展示到指定的标签结构中
    const resStr = res.data.results.map(item => {
        return `<tr>
        <td>
          <img src="${item.cover.type === 0 ? `https://img2.baidu.com/it/u=2640406343,1419332367&amp;fm=253&amp;fmt=auto&amp;app=138&amp;f=JPEG?w=708&amp;h=500` : item.cover.images[0]}" alt="">
        </td>
        <td>${item.title}</td>
        <td>
            ${item.status === 1 ? `<span class="badge text-bg-primary">待审核</span>` : `<span class="badge text-bg-success">审核通过</span>`}
        </td>
        <td>
          <span>${item.pubdate}</span>
        </td>
        <td>
          <span>${item.read_count}</span>
        </td>
        <td>
          <span>${item.comment_count}</span>
        </td>
        <td>
          <span>${item.like_count}</span>
        </td>
        <td data-id = ${item.id}>
          <i class="bi bi-pencil-square edit"></i>
          <i class="bi bi-trash3 del"></i>
        </td>
      </tr>`
    }).join('')
    document.querySelector('.art-list').innerHTML = resStr

    //3.1 保存并设置文章总条数
    totalCount = res.data.total_count
    console.log(totalCount);
    document.querySelector('.total-count').innerHTML = `共${totalCount}条`
}
setArtileList()


/**
 * 目标2：筛选文章列表
 *  2.1 设置频道列表数据
 *  2.2 监听筛选条件改变，保存查询信息到查询参数对象
 *  2.3 点击筛选时，传递查询参数对象到服务器
 *  2.4 获取匹配数据，覆盖到页面展示
 */

//2.1 设置频道列表数据
//1.1 获取频道列表数据
async function setChannleList() {
    const res = await axios({
        //基地址＋url
        url: `/v1_0/channels`
    })
    console.log(res);
    const resStr = res.data.channels.map(item => {
        return `<option value="${item.id}">${item.name}</option>`
    }).join('')
    document.querySelector('.form-select').innerHTML = '<option value="" selected>请选择文章频道</option>' + resStr
}
//默认网页运行后就马上调用
setChannleList()

//2.2 监听筛选条件改变，保存查询信息到查询参数对象
//筛选状态标记数字==》change事件==》绑定到查询参数对象上
//遍历每个单选框
document.querySelectorAll('.form-check-input').forEach(radio => {
    radio.addEventListener('change', e => {
        //console.log(e.target.value);
        queryObj.status = e.target.value
    })
})
//筛选频道id -> change -> 绑定到查询参数对象上
document.querySelector('.form-select').addEventListener('change', e => {
    queryObj.channel_id = e.target.value
})

//2.3 点击筛选时，传递查询参数对象到服务器
//监听点击筛选按钮事件
document.querySelector('.sel-btn').addEventListener('click', () => {
    //调用获取文章列表渲染到列表函数
    //2.4 获取匹配数据，覆盖到页面展示
    setArtileList()
})


/**
 * 目标3：分页功能
 *  3.1 保存并设置文章总条数
 *  3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
 *  3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
 */
//3.1 保存并设置文章总条数
//3.2 点击下一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.next').addEventListener('click', e => {
    //临界值判断(向上取整)
    if (queryObj.page < Math.ceil(totalCount / queryObj.per_page)) {
        queryObj.page++
        document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
        //调用获取文章列表渲染到列表函数,(不用担心显示混乱，因为queryObj.page会自增)
        setArtileList()
    }
})
//3.3 点击上一页，做临界值判断，并切换页码参数并请求最新数据
document.querySelector('.last').addEventListener('click', e => {
    //临界值判断(向上取整)
    //当前页码大于1才能往回翻
    if (queryObj.page > 1) {
        queryObj.page--
        document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
        //调用获取文章列表渲染到列表函数,(不用担心显示混乱，因为queryObj.page会自增)
        setArtileList()
    }
})

/**
 * 目标4：删除功能
 *  4.1 关联文章 id 到删除图标(在渲染的时候添加data-id自定义属性)
 *  4.2 点击删除时，获取文章 id
 *  4.3 调用删除接口，传递文章 id 到服务器
 *  4.4 重新获取文章列表，并覆盖展示
 *  4.5 删除最后一页的最后一条，需要自动向前翻页
 */
//需要用到事件委托
document.querySelector('.art-list').addEventListener('click', async e => {
    //判断点击的时是删除
    if (e.target.classList.contains('del')) {
        //点到对应删除图标的id
        const delId = e.target.parentNode.dataset.id
        const res = await axios({
            url: `/v1_0/mp/articles/${delId}`,
            method: 'DELETE'
        })
        console.log(res);
        //4.5 删除最后一页的最后一条，需要自动向前翻页
        const children = document.querySelector('.art-list').children
        if(children.length === 1 && queryObj.page !== 1){
            queryObj.page--
            document.querySelector('.page-now').innerHTML = `第 ${queryObj.page} 页`
        }

        //调用获取文章列表渲染到列表函数,(不用担心显示混乱，因为queryObj.page会自增)
        setArtileList()
    }

})



// 点击编辑时，获取文章 id，跳转到发布文章页面 传递文章 id 过去

//需要用到事件委托绑定点击事件,然后获取id
//（新知识：跨页面传参）
document.querySelector('.art-list').addEventListener('click', async e => {
    //判断点击的时是删除

    if (e.target.classList.contains('edit')) {
        //点到对应删除图标的id
        
        const editId = e.target.parentNode.dataset.id
        console.log(editId);
        //4.1 页面跳转传参（URL 查询参数方式）
        location.href = `../publish/index.html?id=${editId}`
        
    }

})
